<template>
    <div class="analysisBox">
        <div class="analysisItem">
            <div class="maincon">
                <div class="title" v-t="'analysis.title1'">My Ad Slot</div>
                <my-ad-space @getData='gettjData'/>
            </div>
        </div>
        <div class="analysisItem">
            <div class="maincon">
                <div class="title" v-t="'analysis.title2'">Effectiveness Analysis</div>
                <analysis-data ref="tjele"/>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myAdSpace from './components/myAdSpace.vue'
import analysisData from './components/analysisData.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       myAdSpace,
       analysisData
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()
        const state = reactive({
            
        })

        onMounted(()=>{
            
        })

        const gettjData =(item)=>{
            console.log(item)
            proxy.$refs.tjele.gettjData(item)
        }

        return{
            ...toRefs(state),
            gettjData
        }
    }
}
</script>

<style lang="scss" scoped>
    .analysisBox{
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-x: auto;
        .analysisItem{
            flex: 1;
            padding: 10px;
            background: url(/images/analysis/itbg.png) left top no-repeat;
            background-size: 100% 100%;
            margin: 0 10px 0 0;
            min-width:600px;
            overflow: hidden;
            padding:30px;
            &+.analysisItem{
                margin-left:10px;
            }
            .maincon{
                height: 100%;
                width: 100%;
                overflow: hidden;
                overflow-y: auto;
                .title{
                    text-align: center;
                    font-size: 28px;
                    font-family: Poppins-SemiBold Italic, Poppins;
                    font-weight: normal;
                    color: #C5FAFF;
                    line-height: normal;
                    text-shadow: 0px 0px 6px #07A3FB;
                    padding: 4px 0 10px 0;
                }
            }
        }
    }
</style>